<template>
  <div class="drawerRight">
    <el-scrollbar>
      <el-tabs v-model="active">
        <el-tab-pane label="地图编辑" name="1">
          <div class="tool" v-for="item in toolList" :key="item.pid">
            <div class="tool-head">{{ item.name }}</div>
            <div
              class="tool-container"
              @click="handleTool(itemTwo.toolType, itemTwo.name)"
              v-for="itemTwo in item.child"
              :key="itemTwo.id"
            >
              <svg-icon :icon-class="itemTwo.icon" size="30" />
              <div class="text">{{ itemTwo.name }}</div>
            </div>
          </div>
          <!-- 快捷提示  -->
          <div class="w-full mt-30">
            <div class="text-[20px] text-#b9b7b7 py-2" style="border-bottom: 1px dotted #6a6a6a">快捷提示</div>
            <div class="flex items-center pt-4" v-for="(item, index) in quickTipsList" :key="index">
              <div class="text-#6a6a6a w-[80px] justify-start">{{ item.value }}：</div>
              <div class="text-[12px] text-#787777 flex-1">{{ item.label }}</div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="地图元素" name="2">
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="节点" name="1">
              <el-input placeholder="搜索" @clear="clearClick" v-model.trim="mapName" clearable :maxlength="20">
                <template #prefix>
                  <i-ep-search />
                </template>
              </el-input>
              <div class="nodesType">
                <div
                  @click="nodesTypeClick(item, 1)"
                  v-for="(item, index) in nodesTypeList"
                  :key="index"
                  class="textNodes"
                >
                  {{ item.nodeNameCn }}
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="路径" name="2">
              <el-input placeholder="搜索" @clear="clearClick" v-model.trim="mapEdgeName" clearable :maxlength="20">
                <template #prefix>
                  <i-ep-search />
                </template>
              </el-input>
              <div class="nodesType">
                <div @click="nodesTypeClick(item, 2)" v-for="(item, index) in edgesList" :key="index" class="textNodes">
                  {{ item.edgeName }}
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
      </el-tabs>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { toolList } from "@/enums/tool";
import { graph } from "./mapNode";
import { useToolStore } from "@/store/modules/tools";
import { quickTipsList } from "@/enums/quickTips";
const toolStore = useToolStore();
interface Props {
  mapId?: any; // 地图id
}
const props = withDefaults(defineProps<Props>(), {});
const emits = defineEmits<{
  handleTool: [_row: any];
}>();
// tabs切换
const active = ref("1");
const activeName = ref("");
const mapName = ref<string>("");
watch(
  () => active.value,
  (oldNew) => {
    if (oldNew && graph.value) {
      getMapNode();
      getEdges();
    }
  },
  {
    deep: true,
  }
);
// 绘制事件
const handleTool = (_type: string, _name: string) => {
  toolStore.changeTool(_type);
  ElMessage.success(_name);
  emits("handleTool", _type);
};

// 获取地图节点列表
const nodesTypeList = ref<any[]>([]);
const getMapNode = async () => {
  const nodeList = graph.value.getNodes();
  const nodeData: any = [];
  nodeList.forEach((item: any) => {
    if (item.id?.startsWith("n")) {
      nodeData.push(item.getData());
    }
  });
  nodesTypeList.value = nodeData;
};
// 获取地图边列表
const edgesList = ref<any[]>([]);
const getEdges = async () => {
  const edgeList = graph.value.getEdges();
  const edgeData: any = [];
  edgeList.forEach((item: any) => {
    if (item.id?.startsWith("e")) {
      edgeData.push(item.getData());
    }
  });
  edgesList.value = edgeData;
};

// 定位
const nodeMode = ref<string>("");
const mapEdgeName = ref<string>("");
const nodesTypeClick = (_row: any, index: number) => {
  if (graph.value) {
    const indexNodeAndEdge = index === 1 ? _row.nodeNameEn : _row.edgeName;
    let ids = graph.value.getCellById(indexNodeAndEdge);
    graph.value.resetSelection(ids);
    nodeMode.value = indexNodeAndEdge;
    mapName.value = _row?.nodeNameEn;
    mapEdgeName.value = _row?.edgeName;
    // 将节点/边的中心与视口中心对齐。
    graph.value.centerCell(ids);
  }
};
// 清空选择区域
const clearClick = () => {
  if (graph.value) {
    let ids = graph.value.getCellById(nodeMode.value);
    graph.value.cleanSelection(ids);
    nodeMode.value = "";
  }
};
</script>
<style scoped lang="scss">
.drawerRight {
  width: 100%;
  height: 100%;
  padding: 0 8px;
  .tool {
    padding: 15px 15px 0 15px;
    &-head {
      font-size: 12px;
      color: #a6a6a6;
    }
    &-container {
      padding: 8px 0 0 4px;
      display: flex;
      align-items: center;
      cursor: pointer;
      .text {
        font-size: 14px;
        padding-left: 4px;
        color: #e0e0e0;
      }
    }
  }

  .nodesType {
    padding: 10px 0 0 20px;
    cursor: pointer;
    .textNodes {
      padding: 10px 0 10px 0;
      border-bottom: 1px solid #474747;
    }
  }
  .title-box {
    display: flex;
    align-items: center;
  }
}
</style>
